﻿@page "/tests/splitter"
<Row>
    <Column>
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Splitter</CardTitle>
            </CardHeader>
            <CardBody Style="height: 300px;">
                <Splitter Direction="@direction" GutterSize="@gutterSize" Width="@(direction == SplitterDirection.Horizontal ? Width.Is100 : null)" Height="@(direction == SplitterDirection.Vertical ? Height.Is100 : null)">
                    <SplitterSection MinSize="@minSize">
                        <div>Hello!</div>
                    </SplitterSection>
                    <SplitterSection MinSize="@minSize">
                        <div>World!</div>
                    </SplitterSection>
                </Splitter>
            </CardBody>
        </Card>
    </Column>
    <Column>
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Settings</CardTitle>
            </CardHeader>
            <CardBody>
                <Field>
                    <FieldLabel>Direction</FieldLabel>
                    <FieldBody>
                        <RadioGroup TValue="SplitterDirection" @bind-CheckedValue="@direction">
                            <Radio Value="SplitterDirection.Horizontal">Horizontal</Radio>
                            <Radio Value="SplitterDirection.Vertical">Vertical</Radio>
                        </RadioGroup>
                    </FieldBody>
                </Field>
                <Field>
                    <FieldLabel Flex="Flex.JustifyContent.Between">
                        <Span>Minimum Size</Span>
                        <Span>@($"{minSize}px")</Span>
                    </FieldLabel>
                    <FieldBody>
                        <Slider @bind-Value="@minSize" Min="0" Max="300" />
                    </FieldBody>
                </Field>
                <Field>
                    <FieldLabel Flex="Flex.JustifyContent.Between">
                        <Span>Gutter Size</Span>
                        <Span>@($"{gutterSize}px")</Span>
                    </FieldLabel>
                    <FieldBody>
                        <Slider @bind-Value="@gutterSize" Min="1" Max="50" />
                    </FieldBody>
                </Field>
            </CardBody>
        </Card>
    </Column>
</Row>
@code {
    SplitterDirection direction = SplitterDirection.Horizontal;
    double minSize = 10;
    double gutterSize = 10;
}